<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情页</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="./css/details.css">

</head>

<body>
    <!-- header部分 -->
    <header class="section">
        <div class="main">
            <img src="./images/首页图片/logo.jpg" alt="">
            <ul>
                <li><a href="">联想商城</a></li>
                <li><a href="./index.html">Think官网</a></li>
                <li><a href="">专属定制</a></li>
                <li><a href="">限时促销</a></li>
                <li><a href="">24期免息</a></li>
                <li><a href="">服务与支持</a></li>
            </ul>
            <div class="search">
                <input type="text" name="searchTxt" value="" placeholder="潮玩开学季" class="searchTxt">
                <a href="">
                    <div class="searchImg"></div>
                </a>
            </div>
            <a href="./sign.html">
                <div class="user"></div>
            </a>
            <a href="./car.html">
                <div class="car"></div>
            </a>
        </div>
    </header>

    <!-- content部分 -->
    <div class="c1-top">
        <div class="main topbox">
            <a href="https://shop.lenovo.com.cn">首页 </a>
            <span class="c1-top-li">&gt; 商品详情 &gt; thinkplus Pocket 便携会议全向麦音箱 陨石银</span>
            <img src="./images/详情页图片/L联系客服.png" alt=""> <span class="cus">联系客服</span>
        </div>
    </div>
    <div class="content1">
        <div class="main">
            <div class="c1-left">
                <div class="bigArea"></div>
                <ul class="c1-left-big">
                    <li style="z-index: 5;"> <img src="./images/详情页图片/squarePicture1.jpg" alt=""></li>
                    <li> <img src="./images/详情页图片/squarePicture2.jpg" alt=""></li>
                    <li> <img src="./images/详情页图片/squarePicture3.jpg" alt=""></li>
                    <li> <img src="./images/详情页图片/squarePicture4.jpg" alt=""></li>
                    <li> <img src="./images/详情页图片/squarePicture5.jpg" alt=""></li>
                    <div id="smallArea"
                        style="display: none; width: 40px; height: 40px; background: rgba(200, 250, 200, 0.4); position: absolute; left: 40px; top: 0;z-index: 10;">
                    </div>
                </ul>
                <ul class="smallAndarr">
                    <li class="arr_left arrow"><img class="img1" src="./images/详情页图片/z向左箭头.png" alt="">
                        <img class="img2" src="./images/详情页图片/z向左箭头 (1).png" alt="">
                    </li>
                    <ul class="c1-left-small">
                        <li class="c1-left-small-selected"> <img src="./images/详情页图片/squarePicture1.jpg" alt=""></li>
                        <li> <img src="./images/详情页图片/squarePicture2.jpg" alt=""></li>
                        <li> <img src="./images/详情页图片/squarePicture3.jpg" alt=""></li>
                        <li> <img src="./images/详情页图片/squarePicture4.jpg" alt=""></li>
                        <li> <img src="./images/详情页图片/squarePicture5.jpg" alt=""></li>
                    </ul>
                    <li class="arr_right arrow"><img class="img1" src="./images/详情页图片/y向右箭头.png" alt="">
                        <img class="img2" src="./images/详情页图片/y向右箭头 (1).png" alt="">
                    </li>
                </ul>
                <div id="bigArea"
                    style="display: none; overflow: hidden; width: 300px; height: 300px; background: rgba(200, 200, 250, 0.5); position: absolute; left: 700px; top: 200px; z-index: 20;">
                    <img id="bigImg" src="./images/详情页图片/squarePicture1.jpg"
                        style="width:800px; height:800px; position: absolute; left: 0; top: 0;" />
                </div>
                <h2>看了又看</h2>
            </div>
            <div class="c1-right">
                <h1 class="title">thinkplus Pocket 便携会议全向麦音箱 陨石银</h1>
                <p class="mintitle">居家办公、远程开会、在线网课神器</p>
                <div class="pricebox">
                    <span>商城价</span>
                    <span>￥</span>
                    <span>299</span>
                    <div class="line1">
                        <p class="cumEva">累计评价</p>
                        <p class="cumEva">311</p>
                    </div>
                </div>
                <div class="msg">
                    <div class="oPtions msgbox">
                        <div class="first1">Think选件</div>
                        <div class="colorbox selectload">陨石银</div>
                        <div class="colorbox">石墨黑</div>
                    </div>
                    <div class="byStages msgbox">
                        <div class="first1">分期付款</div>
                        <div class="hua">
                            <div class="byStagesicon"><img src="./images/详情页图片/h花呗.png" alt=""><span
                                    class="fen">花呗分期</span><span class="mian"></div>
                            <div class="free">| 支持12期免息</div>
                            <div class="turndown"><img src="./images/详情页图片/s箭头 上.png" alt=""><img
                                    src="./images/详情页图片/x箭头 下.png" alt=""></div>
                            <div class="drop-down-menu">
                                <div class="loanbox"><input type="checkbox" name="" id=""><span
                                        class="loan">￥99.67x3期</span><span class="loan1">免息，0手续费</span></div>
                                <div class="loanbox"><input type="checkbox" name="" id=""><span
                                        class="loan">￥49.83x6期</span><span class="loan1">免息，0手续费</span></div>
                                <div class="loanbox"> <input type="checkbox" name="" id=""><span
                                        class="loan">￥24.92x12期</span><span class="loan1">免息，0手续费</span></div>
                            </div>
                        </div>
                        <div class="bai">
                            <div class="byStagesicon"><img src="./images/详情页图片/b白条.png" alt=""><span
                                    class="fen">白条分期</span><span class="mian"></div>
                            <div class="free">| 支持12期免息</div>
                            <div class="turndown"><img src="./images/详情页图片/s箭头 上.png" alt=""><img
                                    src="./images/详情页图片/x箭头 下.png" alt=""></div>
                            <div class="drop-down-menu">
                                <div class="loanbox"><input type="checkbox" name="" id=""><span
                                        class="loan">￥99.67x3期</span><span class="loan1">免息，0手续费</span></div>
                                <div class="loanbox"><input type="checkbox" name="" id=""><span
                                        class="loan">￥49.83x6期</span><span class="loan1">免息，0手续费</span></div>
                                <div class="loanbox"> <input type="checkbox" name="" id=""><span
                                        class="loan">￥24.92x12期</span><span class="loan1">免息，0手续费</span></div>
                            </div>
                        </div>
                        <div class="yin">
                            <div class="byStagesicon"><img src="./images/详情页图片/y银联.png" alt=""><span
                                    class="fen">银联分期</span><span class="mian"></div>
                            <div class="free">| 使用银联分期</div>
                        </div>
                    </div>
                    <div class="distribution msgbox">
                        <div class="first1">配送至</div>
                        <div class="distr">
                            <span class="province">广西壮族自治区</span>
                            <span class="city">北海市</span>
                            <span class="area">合浦县</span>
                            <span class="country">请选择</span>
                            <div class="turndown2"><img src="./images/详情页图片/s箭头 上.png" alt=""><img
                                    src="./images/详情页图片/x箭头 下.png" alt=""></div>

                        </div>
                        <span class="txt1">16:00 点前完成下单, 预计后天 (9月28日)送达</span>
                        <div class="drop-down-menu2">

                        </div>
                    </div>
                    <div class="quantity msgbox">
                        <div class="first1">购买数量</div>
                        <div class="bugynumbox">
                            <!-- 购物数量 -->
                            <button class='sub'>-</button>
                            <input style='width:50px; height:25px; text-align:center' id='num' value="1">
                            <button class='plus'>+</button>
                        </div>
                    </div>
                </div>
                <button class="buynow">立即购买</button>
                <a href="./car.html"><button class="incar" data-id="1">加入购物车</button></a>
            </div>
        </div>

    </div>
    <div class="content2">
        <div class="content2box">
            <div class="arrow1 arr_left1"><img src="./images/详情页图片/z向左箭头.png" alt=""></div>
            <div class="listscroll">
                <div class="main">
                    <ul class="list">
                        <li><img src="./images/详情页图片/squarePicture1small.jpg" alt="">
                            <p class="pro-name">thinkplus 超薄蓝牙音箱</p>
                            <p class="price">￥299</p>
                        </li>
                        <li><img src="./images/详情页图片/squarePicture2small.jpg" alt="">
                            <p class="pro-name">thinkplus 超薄蓝牙音箱</p>
                            <p class="price">￥299</p>
                        </li>
                        <li><img src="./images/详情页图片/squarePicture3small.jpg" alt="">
                            <p class="pro-name">thinkplus 超薄蓝牙音箱</p>
                            <p class="price">￥299</p>
                        </li>
                        <li><img src="./images/详情页图片/squarePicture4small.jpg" alt="">
                            <p class="pro-name">thinkplus 超薄蓝牙音箱</p>
                            <p class="price">￥299</p>
                        </li>
                        <li><img src="./images/详情页图片/squarePicture5small.jpg" alt="">
                            <p class="pro-name">thinkplus 超薄蓝牙音箱</p>
                            <p class="price">￥299</p>
                        </li>
                        <li><img src="./images/详情页图片/squarePicture6small.jpg" alt="">
                            <p class="pro-name">thinkplus 超薄蓝牙音箱</p>
                            <p class="price">￥299</p>
                        </li>
                        <li><img src="./images/详情页图片/squarePicture7small.jpg" alt="">
                            <p class="pro-name">thinkplus 超薄蓝牙音箱</p>
                            <p class="price">￥299</p>
                        </li>
                        <li><img src="./images/详情页图片/squarePicture8small.jpg" alt="">
                            <p class="pro-name">thinkplus 超薄蓝牙音箱</p>
                            <p class="price">￥299</p>
                        </li>
                        <li><img src="./images/详情页图片/squarePicture9small.jpg" alt="">
                            <p class="pro-name">thinkplus 超薄蓝牙音箱</p>
                            <p class="price">￥299</p>
                        </li>
                        <li><img src="./images/详情页图片/squarePicture10small.jpg" alt="">
                            <p class="pro-name">thinkplus 超薄蓝牙音箱</p>
                            <p class="price">￥299</p>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="arrow1 arr_right1"><img src="./images/详情页图片/y向右箭头.png" alt=""></div>
        </div>
    </div>

    <div class="content3">
        <div class="detail-tab-title">thinkplus Pocket 便携会议全向麦音箱 陨石银</div>
        <ul class="c-list">
            <li>商品详情</li>
            <li>商品评价(333)</li>
            <li>服务支持</li>
            <li><button>立即购买</button></li>
        </ul>
    </div>

    <div class="content4 section">
        <a href=""><img src="./images/详情页图片/linklong1.jpg" alt=""></a>
        <a href=""><img src="./images/详情页图片/linklong2.jpg" alt=""></a>
        <a href=""><img src="./images/详情页图片/linklong3.jpg" alt=""></a>
        <a href=""><img src="./images/详情页图片/linklong4.jpg" alt=""></a>
        <a href=""><img src="./images/详情页图片/linklong5.jpg" alt=""></a>
        <a href=""><img src="./images/详情页图片/linklong6.jpg" alt=""></a>
    </div>
    <div class="contentmiddle""></div>
    <div class=" content5 section ">
        <img src=" ./images/详情页图片/big1.jpg" alt="">
        <img src="./images/详情页图片/big2.jpg" alt="">
        <img src="./images/详情页图片/big3.jpg" alt="">
        <img src="./images/详情页图片/big4.jpg" alt="">
        <img src="./images/详情页图片/big5.jpg" alt="">
        <img src="./images/详情页图片/big6.jpg" alt="">
        <img src="./images/详情页图片/big7.jpg" alt="">
        <img src="./images/详情页图片/big8.jpg" alt="">
        <img src="./images/详情页图片/big9.jpg" alt="">
        <img src="./images/详情页图片/big10.jpg" alt="">
        <img src="./images/详情页图片/big11.jpg" alt="">
        <img src="./images/详情页图片/big12.jpg" alt="">
        <img src="./images/详情页图片/big13.jpg" alt="">
        <img src="./images/详情页图片/big14.jpg" alt="">
        <img src="./images/详情页图片/big15.jpg" alt="">
        <img src="./images/详情页图片/big16.jpg" alt="">
    </div>

    <!-- 侧面固定的那部分 -->
    <div class="listFixbox">
        <img class="userlogo" src="./images/详情页图片/userlogo.jpg" alt="">
        <div class="listfix">
            <div class="top">TOP</div>
            <ul class="floor">
                <li class="layer layer_select">头部</li>
                <li class="layer">活动</li>
                <li class="layer">详情</li>
            </ul>

        </div>
    </div>


    <!-- foot部分 -->
    <footer class="section">
        <div class="icon">
            <img src="./images/购物车图片/icon.png" alt="">
        </div>
        <div class="foot">
            <div class="main">
                <div class="footcon">
                    <div class="footleft">
                        <div class="footleft-top"></div>
                        <ul class="foot_top clearfix">
                            <li class="fl shop_lenovo">
                                <a class="foot_top_title">购物指南</a>
                                <a href="//shop.lenovo.com.cn/help/service-provider-information.html">
                                    服务商信息
                                </a>
                                <a href="//shop.lenovo.com.cn/help/order-processing.html">
                                    购买流程
                                </a>
                                <a href="//shop.lenovo.com.cn/help/registration-login.html">
                                    注册登录
                                </a>
                                <a href="//help.lenovo.com.cn/shop/pingjiashuoming.html">
                                    商品评价
                                </a>
                            </li>
                            <li class="fl service_lenovo">
                                <a class="foot_top_title">配送方式</a>
                                <a href="//shop.lenovo.com.cn/help/sales-and-distribution-methods.html">
                                    配送方式
                                </a>
                                <a href="//shop.lenovo.com.cn/help/distribution-information.html">
                                    配送方式信息
                                </a>
                                <a href="//shop.lenovo.com.cn/help/sign-principle.html">
                                    签收原则
                                </a>
                                <a href="//shop.lenovo.com.cn/help/logistics-query.html">
                                    物流查询
                                </a>
                            </li>
                            <li class="fl lenovo_website_group">
                                <a class="foot_top_title">支付方式</a>
                                <a href="//shop.lenovo.com.cn/help/bank_fq.html">
                                    分期支付
                                </a>
                                <a href="//shop.lenovo.com.cn/help/payments.html">
                                    支付方式
                                </a>
                                <a href="//shop.lenovo.com.cn/help/question-of-payment.html">
                                    支付问题
                                </a> </li>
                            <li class="fl lenovo_website_group">
                                <a class="foot_top_title">
                                    订单信息
                                </a>
                                <a href="//shop.lenovo.com.cn/help/order-information.html">
                                    订单信息
                                </a>
                                <a href="//shop.lenovo.com.cn/help/orders-invoices-other.html">
                                    发票信息
                                </a>
                                <a href="//shop.lenovo.com.cn/help/activation/index.html">
                                    手机激活查询
                                </a>
                            </li>
                            <li class="fl lenovo_website_group">
                                <a class="foot_top_title">
                                    售后服务
                                </a>
                                <a href="//shop.lenovo.com.cn/help/after-sales-lenovo.html">
                                    售后服务总则
                                </a>
                                <a href="http://robot.lenovo.com.cn/lenovo/?channel=H325B">
                                    24小时在线客服
                                </a>
                                <a href="https://newsupport.lenovo.com.cn/?fromsource=guanwangbottom">
                                    联想服务入口
                                </a>
                                <a href="https://iknow.lenovo.com.cn/">
                                    热门解决方案
                                </a>
                                <a href="https://iknow.lenovo.com.cn/tool/lists">
                                    Lenovo Quick Fix工具
                                </a>
                            </li>
                            <li class="fl lenovo_website_group">
                                <a class="foot_top_title">
                                    其他说明
                                </a>
                                <a href="//shop.lenovo.com.cn/help/service-commitment.html">
                                    服务承诺
                                </a>
                                <a href="//shop.lenovo.com.cn/help/account-security.html">
                                    账户安全
                                </a>
                                <a href="http://www.lenovocare.com.cn/default.aspx">
                                    手机产品购买须知
                                </a>
                                <a style="cursor: pointer;"
                                    href="//shop.lenovo.com.cn/help/environmentInfo/xywkgk1.html">环境信息</a>
                            </li>
                            <li class="line2"></li>

                        </ul>
                    </div>
                    <div class="footright">
                        <ul>
                            <li class="fl social_platform">
                                <div class="kef_phone">
                                    <h3>400-166-6666</h3>
                                    <span>周一到周日 9:00-21:00</span>
                                    <a href="https://lecs.lenovo.com.cn" class="kef_a">
                                        <img src="./images/购物车图片/z在线咨询.png" alt="">
                                    </a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>

            </div>
        </div>
        <div class="footbottom">
            <div class="main">
                <div class="foot_bot">
                    <div class="foot_bot_con clearfix">
                        <div class="foot_bot_left fl">
                            <span>版权所有：1998-2021 联想集团</span>
                            <span>|</span><a href="https://shop.lenovo.com.cn/investor/html/legal.html">法律公告</a>
                            <span>|</span><a href="https://www.lenovo.com.cn/statement/privacy.html">隐私权政策</a>
                            <span>|</span><a href="https://www.lenovo.com.cn/public/security/security.html">产品安全</a>
                        </div>
                        <div class="foot_bot_right fr">
                            <a href="http://beian.miit.gov.cn/">京ICP备11035381-2</a>
                            <span>|</span><span>京公网安备110108007970号</span>
                            <span>|</span>
                            <a
                                href="https://p2.lefile.cn/product/adminweb/2019/07/09/4e555443-93b5-46d5-984f-7d5b06ea2967.jpg">
                                营业执照:91110108700000458B</a>
                            <span>|</span>
                            <a href="https://p2.lefile.cn/fes/cms/2021/06/28/kfqkr0wi9cgsbuubsnbwihci0rg4ft786379.jpg">
                                增值电信业务许可证合字B2-20210143
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </footer>
    <!-- js -->
    <script src="./js/details/jquery.js"></script>
    <script src="./js/details/详情图切换.js"></script>
    <script src="./js/details/看了又看.js"></script>
    <script src="./js/details/返回顶部.js"></script>
    <script src="./js/details/放大镜.js"></script>
    <script src="./js/details/盖楼层.js"></script>

    <!-- 购物车 -->
    <script src="./js/carts/js.cookie.js"></script>
    <script>
        //模拟数据、数据库
        var dataList = [{
            id: 1,
            name: "thinkplus Pocket 便携会议全向麦音箱 陨石银",
            price: 299,
            img: "./images/详情页图片/squarePicture1.jpg"
        }]
        //点击加入购物车
        var oContent1 = document.querySelector(".content1")
        oContent1.addEventListener("click", function (evt) {
            var e = evt || window.event;
            var ele = e.target || e.srcElement;
            if (!(ele.nodeName == 'BUTTON' && ele.className == 'incar')) {
                return;
            }
            var id = ele.getAttribute("data-id");
            //1). 购买产品的信息 
            var currentObj;
            for (var i = 0; i < dataList.length; i++) {
                if (dataList[i].id == id) {
                    currentObj = dataList[i];
                    break;
                }
            }
            //2). 得到本地的cookie的数据 (如果没有就准备一个空数组)
            var localData = JSON.parse(Cookies.get("carts" || "[]"));
            //3). 拿购买产品信息 与本地数据量进行一一比较(循环)
            var isOneAdd = true; //默认是第一次购买
            // 如果 已经购买过,那就数量+1
            // 如果 从未购买, 购买信息上加一个数量等于1,并且把购买信息推到本地数据里
            localData.forEach(function (item) {
                if (item.id == currentObj.id) {
                    item.number = Number(item.number) + 1;
                    isOneAdd = false;
                }
            })
            if (isOneAdd == true) {
                currentObj.number = 1;
                localData.push(currentObj);
            }
            //4). localData已经发了变化,而cookie里的数据没有变化,让localData覆盖之前的cookie
            Cookies.set("carts", JSON.stringify(localData), {
                expires: 10
            })

            alert("购买成功!");
        })
    </script>
    <!-- 懒加载 -->
    <!-- <script src="./js/jquery.lazyload.js"></script>
    <script>
        $(".content4 img").lazyload({
            effect: "fadeIn",
            placeholder: "./images/loading.gif",
            threshold: 200, // 提前开始加载
            container: $(".content4"), //指定区域
        });
    </script> -->
</body>

</html>